import { useAccount } from "@/stores/account";
import { useCommentAppoint, useCommentLoop } from "@/stores/comment";
import { useSession } from "@/stores/sesstion";
import { defineComponent, ref } from "vue";
import styles from './styles.module.css';
import { parseNick, showToast } from "@/utils/utils";



const Input = defineComponent({
    setup(_props, _ctx) {
        const appoint = useCommentAppoint();
        return () => {
            return (
                <div >
                    <el-row class={styles.inputBox}>
                        <el-col span={2} class={styles.inputText}>内容:</el-col>
                        <el-col span={8} class={styles.text}><el-input placeholder="请输入发言内容" size="small" v-model={appoint.content}></el-input></el-col>
                        <el-col span={2} class={styles.inputText}>&nbsp;间隔:</el-col>
                        <el-col span={5}><el-input-number max={10} min={1} style="width:100%;" v-model={appoint.time} size="small" step={1} step-strictly></el-input-number></el-col>
                        <el-col span={2} class={styles.inputText}>&nbsp;&nbsp;秒</el-col>
                        <el-col span={5}><el-button size="small" type="primary" onClick={() => {
                            if (appoint.isRun) {
                                appoint.stop();
                            } else {
                                appoint.start();
                            }

                        }}>{
                                appoint.isRun ? '停止发言' : '选中发言'
                            }</el-button></el-col>
                    </el-row>
                </div>

            );
        }
    },
});


export default defineComponent({
    setup(_props, _ctx) {
        const AccountStore = useAccount();
        const appoint = useCommentAppoint();
        const session = useSession();
        return () => {
            return (
                <div class={[styles.app]}>
                    <el-table
                        size="small"
                        border
                        data={AccountStore.accounts}
                        stripe={true}
                        height="380"
                        style="width: 100%;"
                        onSelectionChange={(selection: any) => {
                            appoint.updateAppoints(selection)
                        }}>
                        <el-table-column
                            type="selection"
                            width="27"
                            selectable={(item) => {
                                return !session.isExpire && !item.exp && !appoint.isRun;
                            }}
                        >
                        </el-table-column>
                        <el-table-column
                            prop="date"
                            width="45"
                            label="序号">
                            {(item: any) => {
                                return item.$index + 1;
                            }}
                        </el-table-column>
                        <el-table-column
                            label="账号"
                        >
                            {(item: any) => {

                                return (
                                    <p class={styles.text}>{parseNick(item.row.nick)}</p>
                                );
                            }}
                        </el-table-column>
                        <el-table-column
                            width="80"
                            label="状态">
                            {(item: any) => {
                                const expireTime = item.row.expireTime || 0;
                                const text = expireTime <= Math.floor(Date.now()/1000) ?'过期':'';
                                return (
                                    <p class={styles.text}>{text}</p>
                                );
                            }}
                        </el-table-column>
                    </el-table>
                    <Input></Input>
                </div>
            )
        };
    }
});